{% extends 'base.html' %}
{% load static %}

{% block title %}帮助文档{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（保持不变） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        <div class="list-group">
            <a href="{% url 'dashboard' %}" class="list-group-item list-group-item-action" data-target="content-dashboard">仪表盘</a>
            <a href="{% url 'user_manage' %}" class="list-group-item list-group-item-action">用户管理</a>
            <a href="{% url 'content_manage' %}" class="list-group-item list-group-item-action">内容管理</a>
            <a href="{% url 'system_config' %}" class="list-group-item list-group-item-action">系统配置</a>
            <a href="{% url 'data_statistics' %}" class="list-group-item list-group-item-action">数据统计</a>
            <a href="{% url 'log_manage' %}" class="list-group-item list-group-item-action">日志管理</a>
            <a href="{% url 'message_center' %}" class="list-group-item list-group-item-action">消息中心</a>
            <a href="{% url 'help_document' %}" class="list-group-item list-group-item-action active">帮助文档</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4">
        <div class="bg-blue-500 h-12 flex items-center justify-center mb-6">
            <h2 class="text-white font-bold text-xl">帮助文档</h2>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 max-w-4xl mx-auto">
            <!-- 文档目录 -->
            <div class="mb-8">
                <h3 class="text-gray-700 font-bold text-lg mb-4">文档目录</h3>
                <ul class="list-disc pl-5 space-y-2">
                    <li><a href="#getting-started" class="text-blue-500 hover:text-blue-700">入门指南</a></li>
                    <li><a href="#faq" class="text-blue-500 hover:text-blue-700">常见问题</a></li>
                    <li><a href="#advanced" class="text-blue-500 hover:text-blue-700">进阶技巧</a></li>
                    <li><a href="#contact" class="text-blue-500 hover:text-blue-700">联系支持</a></li>
                </ul>
            </div>

            <!-- 入门指南 -->
            <div id="getting-started" class="mb-8 scroll-mt-20">
                <h3 class="text-gray-700 font-bold text-lg mb-4">入门指南</h3>

                <div class="mb-6">
                    <h4 class="text-gray-700 font-bold mb-2">系统登录</h4>
                    <p class="text-gray-800 leading-relaxed">
                        访问系统登录页面，输入您的用户名和密码，点击"登录"按钮即可进入系统。
                    </p>
                    <div class="bg-gray-50 p-4 rounded-lg my-3">
                        <h5 class="font-medium text-gray-900 mb-2">忘记密码？</h5>
                        <p class="text-gray-700 mb-2">如果您忘记了密码，可以点击登录页面上的"忘记密码"链接，按照提示重置密码。</p>
                        <ol class="list-decimal pl-5 mt-2">
                            <li>输入您注册时使用的邮箱地址</li>
                            <li>系统将发送一封重置密码的邮件到您的邮箱</li>
                            <li>点击邮件中的链接，按照提示设置新密码</li>
                        </ol>
                    </div>
                </div>

                <div class="mb-6">
                    <h4 class="text-gray-700 font-bold mb-2">主要功能模块</h4>
                    <p class="text-gray-800 leading-relaxed">
                        系统主要包含以下功能模块，您可以通过左侧边栏进行访问：
                    </p>
                    <ul class="list-disc pl-5 mt-2 space-y-1">
                        <li><span class="font-medium">仪表盘</span> - 显示系统概览和关键指标</li>
                        <li><span class="font-medium">用户管理</span> - 管理系统用户和权限</li>
                        <li><span class="font-medium">内容管理</span> - 创建和管理网站内容</li>
                        <li><span class="font-medium">系统配置</span> - 配置系统参数和设置</li>
                        <li><span class="font-medium">数据统计</span> - 查看系统数据和统计图表</li>
                        <li><span class="font-medium">日志管理</span> - 查看系统操作日志</li>
                        <li><span class="font-medium">消息中心</span> - 接收系统通知和消息</li>
                        <li><span class="font-medium">帮助文档</span> - 获取系统使用帮助</li>
                    </ul>
                </div>
            </div>

            <!-- 常见问题 -->
            <div id="faq" class="mb-8 scroll-mt-20">
                <h3 class="text-gray-700 font-bold text-lg mb-4">常见问题</h3>

                <div class="space-y-4">
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-bold text-gray-800 mb-2">忘记密码怎么办？</h4>
                        <p class="text-gray-700">
                            点击登录页面的"忘记密码"链接，输入注册邮箱，系统将发送重置密码邮件至您的邮箱，按照邮件提示操作即可重置密码。
                        </p>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-bold text-gray-800 mb-2">如何更改个人资料？</h4>
                        <p class="text-gray-700">
                            点击页面右上角的用户头像，选择"个人资料"，在打开的页面中修改相关信息后，点击"保存"按钮即可。
                        </p>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-bold text-gray-800 mb-2">如何上传内容？</h4>
                        <p class="text-gray-700">
                            进入"内容管理"模块，点击"创建内容"按钮，填写内容标题、正文等信息，上传相关图片或附件，最后点击"保存"或"发布"按钮即可。
                        </p>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-bold text-gray-800 mb-2">如何设置用户权限？</h4>
                        <p class="text-gray-700">
                            进入"用户管理"模块，选择要设置权限的用户，点击"编辑"按钮，在弹出的表单中选择用户角色和权限，最后点击"保存"按钮。
                        </p>
                    </div>
                </div>
            </div>

            <!-- 进阶技巧 -->
            <div id="advanced" class="mb-8 scroll-mt-20">
                <h3 class="text-gray-700 font-bold text-lg mb-4">进阶技巧</h3>

                <div class="mb-6">
                    <h4 class="text-gray-700 font-bold mb-2">如何进行数据批量导入？</h4>
                    <p class="text-gray-800 leading-relaxed">
                        系统支持通过Excel表格进行数据批量导入。具体步骤如下：
                    </p>
                    <ol class="list-decimal pl-5 mt-2 space-y-2">
                        <li>准备好符合格式要求的Excel表格，确保包含所有必填字段</li>
                        <li>进入需要导入数据的模块，点击"批量导入"按钮</li>
                        <li>在弹出的对话框中，点击"选择文件"，选择准备好的Excel表格</li>
                        <li>点击"上传"按钮，系统将自动解析表格数据并导入</li>
                        <li>导入完成后，系统会显示导入结果，包括成功导入的记录数和失败记录的原因</li>
                    </ol>
                </div>

                <div class="mb-6">
                    <h4 class="text-gray-700 font-bold mb-2">如何设置个性化工作流？</h4>
                    <p class="text-gray-800 leading-relaxed">
                        系统提供灵活的工作流编辑器，允许您自定义业务流程。设置步骤如下：
                    </p>
                    <ol class="list-decimal pl-5 mt-2 space-y-2">
                        <li>进入"系统配置"模块，选择"工作流设置"</li>
                        <li>点击"新建工作流"按钮，输入工作流名称和描述</li>
                        <li>使用工作流编辑器添加、删除和调整流程节点</li>
                        <li>为每个节点设置处理人员、操作权限和流转条件</li>
                        <li>设置完成后，点击"保存"按钮保存工作流定义</li>
                        <li>在相关业务模块中选择使用此工作流</li>
                    </ol>
                </div>
            </div>

            <!-- 联系支持 -->
            <div id="contact" class="scroll-mt-20">
                <h3 class="text-gray-700 font-bold text-lg mb-4">联系支持</h3>

                <div class="bg-gray-50 p-5 rounded-lg">
                    <p class="text-gray-800 mb-4">
                        如果您在使用过程中遇到任何问题，可通过以下方式联系我们的技术支持团队：
                    </p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div class="flex items-start">
                            <i class="fa fa-envelope text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-medium text-gray-900">客服邮箱</h4>
                                <p class="text-gray-700">support@example.com</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <i class="fa fa-phone text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-medium text-gray-900">联系电话</h4>
                                <p class="text-gray-700">400-123-4567</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <i class="fa fa-clock-o text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-medium text-gray-900">工作时间</h4>
                                <p class="text-gray-700">周一至周五 9:00 - 18:00</p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6">
                        <h4 class="font-medium text-gray-900 mb-3">提交反馈</h4>
                        <form>
                            <div class="mb-3">
                                <label for="feedback-subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                <input type="text" id="feedback-subject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入反馈主题">
                            </div>

                            <div class="mb-3">
                                <label for="feedback-content" class="block text-sm font-medium text-gray-700 mb-1">问题描述</label>
                                <textarea id="feedback-content" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请详细描述您遇到的问题..."></textarea>
                            </div>

                            <button type="button" class="px-4 py-1.5 bg-blue-100 border border-blue-400 rounded-md text-blue-700 hover:bg-blue-200 transition-colors">
                                提交反馈
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 侧边栏交互逻辑
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('click', function(e) {
            document.querySelector('.list-group-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
</script>
{% endblock %}